<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
    style: {
        navigationStyle: "custom",
        navigationBarTitleText: "首页",
    },
}
</route>
<template>
    <!-- :style="{
            marginTop: safeAreaInsets?.top + 'px',
        }" -->
    <view class="m-base-box m-home">
        <!--    顶部轮播-->
        <view class="m-swiper" v-if="swiperList.length > 0">
            <wd-swiper
                :list="swiperList"
                height="230"
                autoplay
                value-key="url"
                v-model:current="current"
                :indicator="{ type: 'fraction' }"
                indicatorPosition="bottom-right"
                @click="handleImgClick"
            ></wd-swiper>
        </view>
        <!-- 功能列表 -->
        <view class="mt-3 m-gap">
            <wd-card>
                <view class="flex py-4">
                    <view
                        class="flex flex-col items-center justify-center w-1/4 gap-1"
                        @click="handleClick(item)"
                        v-for="(item, index) in funList"
                        :key="index"
                    >
                        <image :src="item.icon" mode="scaleToFill" class="h-8 w-8" />
                        <text>{{ item.name }}</text>
                    </view>
                </view>
            </wd-card>
        </view>
        <!-- 消息通知 -->
        <!-- <view class="mt-2 px-4" v-if="notices">
            <wd-notice-bar :text="notices" prefix="warn-bold" custom-class="space" />
        </view> -->
        <!-- 热门推荐 -->
        <view class="mt-[60px] mb-4 px-4">
            <view class="u-hot">景点推荐</view>
        </view>
        <!-- 瀑布流展示位置 -->
        <view class="px-4">
            <flowSpot :columns="columns"></flowSpot>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { listUsingGet, getRedSpotUsingGet, getConfigUsingGet, spotBookUsingGet } from "@/service/app";
import jddt from "@/static/mp-weixin/svg/jddt.svg";
import yry from "@/static/mp-weixin/svg/yry.svg";
import sygp from "@/static/mp-weixin/svg/sygp.svg";
import chhd from "@/static/mp-weixin/svg/chhd.svg";
import flowSpot from "@/components/spotFlow.vue";
defineOptions({
    name: "Home",
});

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const current = ref<number>(0);

const swiperList = ref([]);
function getSwiperList() {
    listUsingGet({}).then((res) => {
        swiperList.value = res?.data || [];
    });
}
function handleImgClick(e) {
    console.log(e);
}
const notices = ref(null);
function getNotices() {
    getConfigUsingGet({ params: { key: "SNOWY_BIZ_NOTICE" } }).then((res) => {
        notices.value = res?.data;
    });
}

const funList = ref([
    {
        name: "景点门票",
        icon: jddt,
        value: 1,
        path: "/pages/scenicSpot/index",
        type: "tab",
    },
    {
        name: "跟团一日游",
        icon: yry,
        value: 2,
        path: "/pages/index/oneDay",
    },
    {
        name: "沉船拍照",
        icon: sygp,
        value: 3,
        path: "/pages/index/photography",
    },
    {
        name: "海钓、潜水",
        icon: chhd,
        value: 4,
        path: "/pages/index/seaFishing",
    },
]);

const handleClick = (item) => {
    if (!item?.path) return;
    if (item.type == "tab") {
        return uni.switchTab({
            url: item?.path,
        });
    }
    uni.navigateTo({
        url: item?.path,
    });
};
const columns = ref([]);
const getRedSpot = () => {
    spotBookUsingGet({ params: { spotname: "" } }).then((res) => {
        columns.value = res?.data || [];
    });
    // getRedSpotUsingGet({ params: {} }).then((res) => {
    //     console.log("列表", res);
    //     columns.value = res?.data || [];
    // });
};
onShow(() => {
    if (swiperList.value.length == 0) {
        getSwiperList();
    }
    // if (notices.value) {
    //     getNotices();
    // }
    if (columns.value.length == 0) {
        getRedSpot();
    }
});
onShareTimeline(() => {
    return {};
});
</script>

<style lang="scss" scoped>
.m-home {
    /* height: calc(100vh - 48px); */
    position: relative;
    .m-gap {
        position: absolute;
        top: 180px;
        z-index: 6;
        width: 100%;
    }
    .u-hot {
        box-sizing: border-box;
        width: 100%;
        padding: 10px 20px;
        font-size: 16px;
        font-weight: 600;
        color: #4d8aaf;
        //渐变背景色
        background: linear-gradient(to bottom, #e5f1ff, rgba(255, 255, 255, 0.1));
        border-radius: 10px 10px 0 0;
    }
}
.m-swiper {
    /* --wot-swiper-radius: 0;
    --wot-swiper-item-padding: 0 24rpx;
    --wot-swiper-nav-dot-color: #e7e7e7;
    --wot-swiper-nav-dot-active-color: #4d80f0; */
    /* padding-bottom: 24rpx; */
    :deep(.custom-indicator-class) {
        /* bottom: -16px; */
        display: none;
    }
    :deep(.custom-image) {
        /* border-radius: 12rpx; */
    }
    :deep(.custom-image-prev) {
        /* height: 168px !important; */
    }
}
</style>
